<template>

姓名：<input type="text" v-model="TiaoJian.Name">

房号：<input type="text" v-model="TiaoJian.Hid">

<button @click="Show">搜索</button>

<table class="table table-bordered">



    <thead>

 <tr>
    <th>编号</th>
<th>房型名称</th>
<th>图片</th>
<th>房间大小</th>
<th>房号</th>
<th>操作</th>


</tr>

    </thead>
    <tbody>
    
        <tr v-for="item in Show1">
            <th>{{ item.hid }}</th>
<th>{{ item.fname }}</th>
<th><img :src="item.fimg" style="height: 100px; width: 100px;"></th>
<th>{{ item.fnum }}</th>
<th>{{ item.hid }}</th>
<th><button @click="IsDel(item.fid)">删除</button></th>


</tr>


    </tbody>
</table>








</template>



<script setup lang="ts">
import axios from 'axios';
import { onMounted,ref } from 'vue';




onMounted(()=>{



    Show();
})


const Show1 =ref([{


    "fid": 0,
  "fname": "string",
  "fimg": "string",
  "hid": 0,
  "isDel": true,
  "fnum": 0



}])

const TiaoJian=ref({

    Name:"",
    Hid:-1,


})


const Show=()=>{


    axios.get('https://localhost:7158/api/User/ShowFangXing',{params:{

        Name:TiaoJian.value.Name,
        Hid:TiaoJian.value.Hid,
    }}).then(res=>{

        Show1.value=res.data


    })
}




const IsDel=(id:number)=>{

    if(!confirm('确定删除吗'))
{
    return;
}
    axios.delete('https://localhost:7158/api/User/IsDel',{params:{

        id:id,
    }}).then(res=>{

        if(res.data>0)
    {

        alert('删除成功')
        Show();
    }
    else
{
    alert('删除失败')
}

    
    })
}


</script>